<template>
  <div class="content-page" v-if="datalist.records.length">
    <div class="content_item" v-for="(i, k) in datalist.records" :key="k" >
      <div class="content_item_title" :style="{ fontSize: globalFont == 'small_font' ? '28rpx' : globalFont == 'small-medium'? '32rpx':'36rpx' }">设备名称：{{ i.equipmentName }}</div>
      <div class="content_item_content" :style="{ fontSize: globalFont == 'small_font' ? '28rpx' : globalFont == 'small-medium'? '32rpx':'36rpx' }">设备编号：{{ i.equipmentNo }}</div>
      <div class="content_item_content" :style="{ fontSize: globalFont == 'small_font' ? '28rpx' : globalFont == 'small-medium'? '32rpx':'36rpx' }">设备类型：{{ i.categoryName }}</div>
      <div class="content_item_content" :style="{ fontSize: globalFont == 'small_font' ? '26rpx' :globalFont == 'small-medium'? '30rpx':'34rpx' }">{{ i.workContent }}</div>
      <div class="content_item_time" :style="{ fontSize: globalFont == 'small_font' ? '24rpx' :globalFont == 'small-medium'? '28rpx':'32rpx' }">{{ i.createTime }}</div>
    </div>
  </div>
  <div v-else class="empty-box">
    <image src="/src/static/home/img_None.png"></image>
    <div class="title" :class="['title', globalFont]">暂无数据</div>
  </div>
</template>
<script setup lang="ts">
import { ref,getCurrentInstance } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import type { worklogType, resInfo } from "@/api/myInfo/type.ts";
import { workRecords } from "@/api/myInfo/myInfo.ts";
const datalist = ref<worklogType>({
  total: '',
  records: []
});
let form = {
  pageNo: 1,
  pageSize: 10,
};
const getDataList = () => {
  workRecords({
    pageNo: form.pageNo,
    pageSize: form.pageSize,
  })
    .then((res: resInfo) => {
      if (res.resultStatus) {
        // datalist.value = res.resultData;
        let arr1 = datalist.value.records
        let arr2 = res.resultData.records
        datalist.value.records = arr1.concat(arr2)
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    });
};
onReachBottom(() => {
  form.pageNo += 1;
  getDataList();
});
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
const globalFont = ref()
onLoad(() => {
  const userInfo_key = appStorage.getObj("userInfo_key");
	globalFont.value = userInfo_key.smallFont
  getDataList();
});
</script>
<style lang="scss" scoped>
:root {
  /* 默认字号 */
  --font-size-small: 26rpx;
  /* 中号字号 */
  --font-size-medium: 32rpx;
    /* 大号字号 */
  --font-size-large: 40rpx;
}

.small_font {
  font-size: var(--font-size-small);
}

.small-medium {
  font-size: var(--font-size-medium);
}

.small-large {
  font-size: var(--font-size-large);
}
.content-page {
  background: #f8f8f8;

  .content_item {
    background-color: #fff;
    border-bottom: 2rpx solid #eeeeee;
    padding: 32rpx;

    &_title {
      // font-size: 32rpx;
      font-weight: bold;
      text-align: left;
      color: #333333;
      line-height: 40rpx;
      margin-bottom: 20rpx;
    }

    &_content {
      // font-size: 26rpx;
      text-align: left;
      color: #333;
      line-height: 43rpx;
      margin-bottom: 32rpx;
    }

    &_time {
      // font-size: 24rpx;
      text-align: left;
      color: #999999;
      line-height: 34rpx;
      margin-bottom: 32rpx;
    }
  }
}

.empty-box {
  height: calc(100vh - 150rpx);
  background: #f8f8f8;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  image {
    width: 150rpx;
    height: 150rpx;
    margin-bottom: 40rpx;
  }

  .title {
    // font-size: 32rpx;
    color: #999999;
    font-weight: bold;
  }
}
</style>
